<template>
  <div class="block" style="margin: 20px;">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">

          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="$router.push('/menu/menu-add/0')"
          >新增一级</el-button>
          <!-- <el-button type="primary" icon="el-icon-edit">审核</el-button> -->
          <!-- <el-button type="primary" @click="jiazai" :loading="loading">加载测试</el-button> -->

        </div>
      </el-col>
    </el-row>
    <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false">
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span>
          <el-button type="text" size="mini" @click="() => append(data)">
            新增
          </el-button>
          <el-button type="text" size="mini" @click="() => edit(node, data)">
            编辑
          </el-button>
          <el-button type="text" size="mini" @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</template>

<script>
import {
  Loading
} from 'element-ui'
const id = 1000
export default {

  data() {
    const data = []// 树结构
    return {
      valueselect: '',
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data))
    }
  },
  // 监听
  watch: {

  },
  // 加载界面的时候执行
  created() {
    this.getlist()
  },
  // 我是事件 类似点击的时候需要我
  methods: {
    append(data) {
      this.$router.push('/menu/menu-add/' + data.id)
    },
    edit(node, data) {
      this.$router.push('/menu/menu-edit/' + data.id)
    },
    remove(node, data) {
      this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('menu/deletes', { menu_id: data.id })
          .then(res => {
            if (res.code == 0) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getlist()// 删除成功了就刷新
            } else {
              this.loading = false
              this.$message.error(res.msg)
              return
            }
          })
          .catch((errora) => {
            console.log(errora)
            this.loading = false
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }, // 查询列表信息
    getlist() {
      // console.log('点击了查询按钮')
      this.loading = true
      this.$store.dispatch('menu/getquery', {})
        .then(res => {
          if (res.code == 0) {
            this.data = res.data
          } else {
            this.$message.error(res.msg)
            return
          }
        })
        .catch((errora) => {
          console.log(errora)
        })
    }

  }
}
</script>

<style>
.custom-tree-node {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding-right: 8px;
}
</style>
